
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <!--<a href="//www.jnshu.com" target="_blank"><img src="../img/demo/logo.png" class="logo"/></a>-->
            <h3>【萌新分院】id与class的区别？</h3>
            <p>分享人：王寒</p>
        </section>
        <section>
            <h3>目录</h3>
            <h4>1.背景介绍</h4>
            <h4>2.知识剖析</h4>
            <h4>3.常见问题</h4>
            <h4>4.解决方案</h4>
            <h4>5.编码实战</h4>
            <h4>6.扩展思考</h4>
            <h4>7.参考文献</h4>
            <h4>8.更多讨论</h4>
        </section>
        <section>
            <h3>1.背景介绍</h3>
        </section>
        <section>
            <p>HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
                HTML页面中的元素就是通过CSS选择器进行控制的。本次讲的id和Class就是id选
                择器和类选择器。
            </p>
        </section>
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <section>
            <h2>什么是ID？</h2>
            <p>从语义上来说，id是identity（ai'dentiti）的简写，identity 是身份的意思，比如我们的身份证就叫做id-card。</p>
            <p>在html中，id是设置标签的标识，使用方法是：</p>
            <pre>
            <code>
               <div id="id名称"></div>
                #id名称{样式声明}<!--这是在CSS中的用法-->
                document.getElementById("id名称")<!--这是在js中的用法-->
                $("#id名称")<!--这是在jQuery中的用法-->
            </code>
            </pre>
        </section>
        <section>
            <h2>ID的作用？</h2>
            <p>id 属性规定 HTML 元素的唯一的 id。
                id 在 HTML 文档中必须是唯一的。
                id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式</p>
        </section>
        <section>
            <h2>什么是class？</h2>
            <p>1.从语义上来说，class是类别的意思，他表示的是具有共同特点的东西，比如我们说我们是一类人，就是说我们有相同的特点。</p>
            <p>2.在html中，我们用class为标签设定一个可以复用的标识，具有同样class的标签就会有相同的特点：</p>
            <pre>
            <code>
           <div class="class名称"></div>
            .class名称{样式声明}<!--这是在CSS中的用法，注意名称前面有一个点-->
            document.getElementsByClassName("class名称")<!--这是在js中的用法-->
            $(".class名称")<!--这是jQuery中的用法-->
            </code>
            </pre>
        </section>
        <section>
            <h2>class的作用</h2>
            <p>在css中，用class来定义那些可复用的样式，然后可以套给多个结构/内容。</p>
        </section>
        <section>
            <h3>3.常见问题</h3>
        </section>
        <section>
            <h3>1.ID和class的区别</h3>
            <h3>2.ID和class的优先级</h3>
            <h3>3.同一页面使用相同的id会怎样</h3>

        </section>
        <section>
            <h3>4.解决方案</h3>
        </section>
        <section>
            <h3>1.ID和class的区别</h3>
            <p>id是一个标签，用于区分不同的结构和内容，就像人的名字，如果一个房间内有2个人同名，在老师点名的时就会出现混淆；
                class是一个样式，可以用在任何结构和内容上，就像一件衣服；
            </p>
        </section>
        <section>
            <h3>2.ID和class的优先级</h3>
            <p>通过继承来的属性 id 的优先级高于 class</p>
            <p>CSS的优先级顺序:   tag中的style   >   id     >     class   >   继承的属性</p>
            <p>一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！</p>
            </p>
        </section>
        <section>
            <h3>3.同一页面使用相同的id会怎样</h3>
            <p>不能通过W3C的校验。在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID
                “一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。</p>
        </section>

        <section>
            <h3>总结</h3>
            <p>在一般情况下：</p>
            <p>我们利用class来为元素添加样式----css</p>
            <p>我们利用id来为元素添加行为----js/jQuery</p>
        </section>
        <section>
            <h3>5.编码实战</h3>
        </section>
        <section>
            <h3>7.参考文献</h3>
            <p>参考一：<a href="https://segmentfault.com/q/1010000006206259">html中，id属性和class属性有什么区别？</a></p>
            <p>参考二：<a href="http://blog.csdn.net/yiluoak_47/article/details/15029817"></a> CSS样式id和class属性优先级问题</p>
            <p>参考三：<a href="https://www.zhihu.com/question/19550864">CSS 的 ID 和 Class 有什么区别？如何正确使用它们？</a></p>
            <p>参考四：<a href="http://blog.csdn.net/lzgs_4/article/details/43446303">CSS选择器优先级及!important属性</a></p>
        </section>
        <section>
            <h3>8.更多讨论</h3>
        </section>
        <section>
            <h3>如何正确使用ID和Class？</h3>
        </section>
        <section>
            <p>css只用class来写并有专门的class通用和私有模块命名，id具有唯一性且优先级太高只作为js操作dom的挂钩全部不添加样式，
                如果使用jq或zepto的话，操作的class类名一般也不加样式，这部分的class命名和id一样由js来制定。这样做比较适合大型，
                多人维护并且需要长期迭代的项目，css的class类名和js操作的id、class类完全分离，这样产品的ui或者产品交互逻辑变动
                二者互不影响，易维护。
            </p>
        </section>
        <section>
            <h4>感谢观看</h4>
            <p><small>BY：王寒</small></p>
        </section>
    </div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>

<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            { src: '../plugin/markdown/marked.js' },
            { src: '../plugin/markdown/markdown.js' },
            { src: '../plugin/notes/notes.js', async: true },
            { src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
        ]
    });
</script>
</body>
</html>